<template>
    <div class="add">
        <input type="text" v-model="newItem" placeholder="请输入代办事项">
        <button @click="addItem">添加</button>
    </div>
</template>

<script setup>
    import { ref } from 'vue'

    let newItem = ref('')

    function addItem() {
        if (newItem.value !== '') {
            defineEmits('add-item', newItem.value)
            newItem.value = ''
        }
    }
</script>

<style scoped>
  .add {
    display: flex;
    margin: 20px 0;
  }
  .add input {
    flex: 1;
    height: 24px;
    padding: 5px;
    border-radius: 5px;
    margin-right: 20px;
    font-size: 16px;
  }
  .add button {
    padding: 5px 20px;
    border-radius: 5px;
    background-color: #42b983;
    color: #fff;
    cursor: pointer;
  }
  .add button:hover {
    background-color: #349876;
  }
</style>